<!-- 登录模态框 -->

<template>
	<view>
		
		<!-- 页面蒙层 -->
		<focus-box v-if="state.isLoginDraw || state.isPersonDraw"
		width="750" :height="sys.screenHeight_rpx"
		mode="col" justify="center" align="center"
		position="fixed" left="0" top="0" index="5x" bg="rgba(0,0,0,0.5)">
			
			<!-- 登录提示模态框 -->
			<focus-box v-if="state.isLoginDraw"
			width="600" :padding="[80,0,0,0]"
			mode="col" justify="start" align="center"
			bg="white" radius="20">
				
				<!-- 弹框标题 -->
				<focus-text size="42" color="black" weight="bold" text="登录帐号"></focus-text>
				<!-- 间隔 -->
				<focus-box width="100" height="50"></focus-box>
				
				<!-- 弹框内容容器 -->
				<focus-box width="510" mode="col" justify="center" align="center">
					<!-- 内容文字 -->
					<text style="font-size:32rpx; line-height:55rpx; color:#353535; text-align:center;">学员登录帐号并实名认证，即可进行安全培训</text>
				</focus-box>
				<!-- 间隔 -->
				<focus-box width="100" height="60"></focus-box>
				
				<!-- 间隔线 -->
				<focus-line length="600" color="info-light"></focus-line>
				<!-- 按钮栏 -->
				<focus-box width="600" height="98" mode="row" justify="center">
					
					<!-- 取消登录按钮 -->
					<focus-box width="298" height="98" mode="row" justify="center" align="center"
					@click="notLoginClick">
						<focus-text size="32" color="#9D9D9D" text="暂不登录"></focus-text>
					</focus-box>
					
					<!-- 按钮中间的间隔线 -->
					<focus-line direction="col" length="98" color="info-light"></focus-line>
					
					<!-- 确定登录按钮 -->
					<button 
						class="modal-login-btn-phone" 
						open-type="getPhoneNumber"
						@getphonenumber="onGetphonenumber"
					>立即登录</button>
					
				</focus-box>
				
			</focus-box>
			
			<!-- 身份选择模态框 -->
			<focus-box v-if="state.isPersonDraw"
			width="600" :padding="[80,0,80,0]"
			mode="col" justify="start" align="center"
			bg="white" radius="20">
				
				<!-- 弹框标题 -->
				<focus-text size="42" color="black" weight="bold" text="请选择您的身份"></focus-text>
				<!-- 间隔 -->
				<focus-box width="100" height="20"></focus-box>
				<!-- 副标题 -->
				<focus-text size="26" color="remark" text="不同身份的学分要求不一样"></focus-text>
				<!-- 间隔 -->
				<focus-box width="100" height="24"></focus-box>
				
				<!-- 身份按钮 -->
				<focus-box v-for="(item,index) in person.list" :key="item.key"
				width="536" height="98" :padding="[0,32]" :margin="[32,0,0,0]"
				mode="row" justify="between" align="center"
				:bg="index==person.index ? 'primary' : 'info'" bgscheme="light"
				:border="index==person.index ? 'primary' : ''" radius="12"
				@click="personBtnClick(index)">
					
					<!-- 身份文字 -->
					<focus-text 
						:color="index==person.index ? 'primary' : 'black'"
						:text="item.name"
					></focus-text>
					
					<!-- 选择图标容器 -->
					<focus-box v-if="index==person.index"
					width="64" height="64" mode="row" justify="end" align="center">
						<!-- 成功图标 -->
						<focus-icon size="30" color="primary" name="fi-tick"></focus-icon>
					</focus-box>
					
				</focus-box>
				
			</focus-box>
			
		</focus-box>
		
	</view>
</template>


<script>
	// 接口请求文件引入
	import request from '@/pagesB/common/js/request/userInfo.js';
	
	/**
	 * 登录模态框组件
	 * @description 登录模态框组件，杜先生开发
	 * @property {String} tag 组件标识，默认：modal-login
	 * @event {Function()} finished 登录流程执行结束触发
	 * @event {Function()} method_showLoginModal $refs方法：弹出登录提示模态框
	 * @event {Function()} method_showPersonModal $refs方法：弹出身份选择模态框
	 */
	export default {
		name: "modal-login",
		props: {
			tag: { type: String, default: 'modal-login' },
		},
		
		// 页面数据
		data() {
			return {
				// 系统信息
				sys: {},
				// 永久缓存
				forever: {},
				
				// 计时器对象
				timer: {
					personChange: null, // 身份选择
				},
				
				// 状态信息
				state: {
					isLoginDraw: false, // 是否渲染登录模态框
					isPersonDraw: false, // 是否渲染身份选择模态框
				},
				
				// 登录信息
				login: {
					code: '', // 微信登录code
					encryptedData: '', // 加密信息串
					iv: '', // 加密向量
				},
				
				// 用户信息
				user: {},
				
				// 身份列表
				person: {
					// 选择项下标
					index: -1,
					// 身份列表
					list: [
						{ key: "personKey_2", id: 2, name: "作业人员" },
						{ key: "personKey_1", id: 1, name: "管理人员" },
					]
				},
				
			};
		},
		
		// 创建完成
		created() {
			// 获取永久缓存信息
			var save_forever = uni.$focus.varForever();
			// 如果缓存信息存在
			if (save_forever) { this.forever = save_forever; }
			// 1. 如果存在userId
			if (this.forever.id)
			{
				// 重新获取token
				request.tokenGet({
					success: (res) => {
						// 用户信息 赋值
						this.user = res;
						// 手机登录后流程
						this.afterPhone();
					},
				});
			}
			// 2. 不存在userId
			else {
				// 弹出登录提示模态框
				// this.showLoginModal();
			}
		},
		
		// 实例挂载完毕
		mounted() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 组件销毁
		beforeDestroy() {
			// 清除定时器
			if (this.timer.personChange) { clearTimeout(this.timer.personChange); }
		},
		
		// 页面事件
		methods: {
			
			// ======================================== 父级$ref调用事件
			// 弹出登录提示模态框
			showLoginModal() {
				// 隐藏tabbar
				uni.hideTabBar({
					animation: false, // 不需要动画
					success: () => {
						// 获取登录code
						this.getLoginCode(()=>{
							// 渲染模态框
							this.state.isLoginDraw = true;
						});
					}
				});
			},
			
			// 弹出身份选择模态框
			showPersonModal() {
				// 隐藏tabbar
				uni.hideTabBar({
					animation: false, // 不需要动画
					success: () => {
						// 渲染模态框
						this.state.isPersonDraw = true;
					}
				});
			},
			
			
			// ======================================== 数据处理
			// 获取登录code
			getLoginCode(callback) {
				// 微信登录api调用
				uni.login({
					success: (loginD) => {
						// 微信登录code 赋值
						this.login.code = loginD.code;
						// 获取成功回调
						if (callback) { callback(); }
					}
				});
			},
			
			// 手机登录后流程
			afterPhone() {
				
				this.state.isLoginDraw = false;
				// 销毁身份模态框
				this.state.isPersonDraw = false;
				// 显示tabbar栏
				uni.showTabBar({ animation: true });
				// finished方法触发
				this.$emit('finished', { "tag": this.tag });
				
				// 如果还未选择身份
				// if (Number(this.user.sentry_pid) <= 0)
				// {
				// 	// 销毁登录模态框
				// 	this.state.isLoginDraw = false;
				// 	// 弹出身份选择模态框
				// 	this.showPersonModal();
				// }
				// // 如果还没选择岗位
				// // else if (!this.user.sentry_ids || this.user.sentry_ids.length<0)
				// // {
				// // 	// 销毁登录模态框
				// // 	this.state.isLoginDraw = false;
				// // 	// 销毁身份模态框
				// // 	this.state.isPersonDraw = false;
				// // 	// 显示tabbar栏
				// // 	uni.showTabBar({ animation: true });
				// // 	// 跳转到岗位选择页面
				// // 	uni.$focus.pageJump('/pages/sentry/index');
				// // }
				// // 说明都选择了
				// else {
				// 	// 销毁登录模态框
				// 	this.state.isLoginDraw = false;
				// 	// 销毁身份模态框
				// 	this.state.isPersonDraw = false;
				// 	// 显示tabbar栏
				// 	uni.showTabBar({ animation: true });
				// 	// finished方法触发
				// 	this.$emit('finished', { "tag": this.tag });
					
				// }
				
			},
			
			
			// ======================================== 元素事件
			// 暂不登录按钮 点击
			notLoginClick() {
				this.state.isLoginDraw = false;
				
			},
			
			// 获取用户手机号码按钮 回调
			onGetphonenumber(res) {
				// 数据取出
				var dataPhone = res.detail;
				// 用户加密信息 赋值
				this.login.encryptedData = dataPhone.encryptedData ? dataPhone.encryptedData : '';
				this.login.iv = dataPhone.iv ? dataPhone.iv : '';
				// 如果加密信息有效，请求用户登录接口
				if (this.login.encryptedData) { this.loginReq()}
				
			},
			
			// 身份按钮 点击
			personBtnClick(indexC) {
				// 弹框提示
				uni.showLoading({ title: '正在切换', mask: true });
				// 选择下标 赋值
				this.person.index = indexC;
				// 延时请求
				this.timer.personChange = setTimeout(()=>{
					// 取消蒙层框
					uni.hideLoading();
					// 用户切换身份
					this.personChangeReq();
				}, 500);
			},
			
			
			// ======================================== 接口请求
			// 用户信息注册
			loginReq() {
				// 微信手机号码登录
				request.login({
					data: {
						wxCode: this.login.code, // 微信登录code
						encryptedData: this.login.encryptedData, // 加密数据字符串
						iv: this.login.iv, // 加密向量
					},
					success: (res) => {
						// 用户信息 赋值
						this.user = res;
						// 手机登录后流程
						this.afterPhone();
						this.$emit('isLogin')
					},
				});
			},
			
			// 用户身份列表
			personListReq(callback) {
				// 用户身份列表请求
				request.personList({
					success: (res) => {
						// 身份列表 赋值
						this.person.list = res.list;
						// 成功回调
						if (callback) { callback }
					},
				});
			},
			
			// 用户切换身份
			personChangeReq() {
				// 接口方法
				request.personChange({
					data: {
						sentry_pid: this.person.list[this.person.index].id, // 身份ID
					},
					success: () => {
						// 重新获取token
						request.tokenGet({
							success: (res) => {
								// 用户信息 赋值
								this.user = res;
								// 手机登录后流程
								this.afterPhone();
							},
						});
					},
				});
			},
			
		},
		
	}
</script>


<style>
	/* 获取用户手机号按钮 */
	.modal-login-btn-phone{
		width: 298rpx; height: 98rpx;
		font-size: 32rpx; color: #4A87FD;
		background: none; border: none; outline: none;
		display: flex; flex-direction: row; justify-content: center; align-items: center;
	}
	button::after{ border: none; }
</style>